<template>
  <div class="storage-selector">
    <div class="storage-header">
      <el-icon class="storage-icon"><Setting /></el-icon>
      <span class="storage-title">存储策略</span>
      <el-button 
        type="text" 
        size="small" 
        @click="refreshStrategies"
        :loading="loading"
      >
        <el-icon><Refresh /></el-icon>
        刷新
      </el-button>
    </div>
    
    <div class="current-strategy">
      <div class="strategy-info">
        <el-icon class="strategy-icon" :class="getIconClass(currentStrategy?.type)">
          <component :is="getIconComponent(currentStrategy?.type)" />
        </el-icon>
        <div class="strategy-details">
          <div class="strategy-name">{{ getStrategyName(currentStrategy?.type) }}</div>
          <div class="strategy-class">{{ currentStrategy?.className }}</div>
        </div>
        <el-tag 
          :type="currentStrategy?.available ? 'success' : 'danger'" 
          size="small"
        >
          {{ currentStrategy?.available ? '可用' : '不可用' }}
        </el-tag>
      </div>
    </div>
    
    <el-divider content-position="left">
      <span class="divider-text">可用策略</span>
    </el-divider>
    
    <div class="strategies-list">
      <div 
        v-for="(strategy, type) in allStrategies" 
        :key="type"
        class="strategy-item"
        :class="{ 'current': type === currentStrategy?.type }"
      >
        <div class="strategy-content">
          <el-icon class="strategy-icon">
            <component :is="getIconComponent(type)" />
          </el-icon>
          <div class="strategy-info">
            <div class="strategy-name">{{ getStrategyName(type) }}</div>
            <div class="strategy-status">
              <el-tag 
                :type="strategy.available ? 'success' : 'danger'" 
                size="small"
              >
                {{ strategy.available ? '可用' : '不可用' }}
              </el-tag>
            </div>
          </div>
          <div class="strategy-actions">
            <el-button 
              type="text" 
              size="small" 
              @click="testStrategy(type)"
              :loading="testingStrategy === type"
            >
              测试
            </el-button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 存储状态组件 -->
    <div class="storage-status-section" style="margin-top: 16px;">
      <StorageStatus />
    </div>
    
    <!-- 测试结果显示 -->
    <el-dialog 
      v-model="testDialogVisible" 
      title="存储策略测试结果" 
      width="500px"
    >
      <div class="test-result">
        <el-result 
          :icon="testResult.success ? 'success' : 'error'"
          :title="testResult.success ? '测试成功' : '测试失败'"
          :sub-title="testResult.message"
        />
      </div>
      <template #footer>
        <el-button @click="testDialogVisible = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, reactive, onMounted, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { Setting, Refresh, Folder, Coin, Cloudy } from '@element-plus/icons-vue'
import { StorageApi, StorageTypeNames, StorageTypeIcons } from '../utils/storageApi'
import StorageStatus from './StorageStatus.vue'

export default {
  name: 'StorageSelector',
  components: {
    Setting,
    Refresh,
    Folder,
    Coin,
    Cloudy,
    StorageStatus
  },
  setup() {
    const loading = ref(false)
    const currentStrategy = ref(null)
    const allStrategies = ref({})
    const testingStrategy = ref(null)
    const testDialogVisible = ref(false)
    const testResult = reactive({
      success: false,
      message: ''
    })
    
    // 获取当前存储策略
    const loadCurrentStrategy = async () => {
      try {
        loading.value = true
        const response = await StorageApi.getCurrentStrategy()
        if (response.success) {
          currentStrategy.value = response.data
        } else {
          ElMessage.error('获取当前存储策略失败')
        }
      } catch (error) {
        ElMessage.error('获取当前存储策略失败: ' + error.message)
      } finally {
        loading.value = false
      }
    }
    
    // 获取所有存储策略
    const loadAllStrategies = async () => {
      try {
        const response = await StorageApi.getAllStrategies()
        if (response.success) {
          allStrategies.value = response.data
        } else {
          ElMessage.error('获取存储策略列表失败')
        }
      } catch (error) {
        ElMessage.error('获取存储策略列表失败: ' + error.message)
      }
    }
    
    // 刷新策略信息
    const refreshStrategies = async () => {
      await Promise.all([
        loadCurrentStrategy(),
        loadAllStrategies()
      ])
    }
    
    // 测试存储策略
    const testStrategy = async (storageType) => {
      try {
        testingStrategy.value = storageType
        const response = await StorageApi.testStrategy(storageType)
        
        testResult.success = response.success
        testResult.message = response.success ? response.data : response.message
        testDialogVisible.value = true
        
      } catch (error) {
        testResult.success = false
        testResult.message = error.message
        testDialogVisible.value = true
      } finally {
        testingStrategy.value = null
      }
    }
    
    // 获取策略名称
    const getStrategyName = (type) => {
      return StorageTypeNames[type] || type
    }
    
    // 获取图标组件
    const getIconComponent = (type) => {
      const iconMap = {
        'local': 'Folder',
        'minio': 'Coin',
        'oss': 'Cloudy'
      }
      return iconMap[type] || 'Folder'
    }
    
    // 获取图标样式类
    const getIconClass = (type) => {
      return `icon-${type}`
    }
    
    onMounted(() => {
      refreshStrategies()
    })
    
    return {
      loading,
      currentStrategy,
      allStrategies,
      testingStrategy,
      testDialogVisible,
      testResult,
      refreshStrategies,
      testStrategy,
      getStrategyName,
      getIconComponent,
      getIconClass
    }
  }
}
</script>

<style scoped>
.storage-selector {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.storage-header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.storage-icon {
  margin-right: 8px;
  color: #409eff;
}

.storage-title {
  font-size: 16px;
  font-weight: 600;
  flex: 1;
}

.current-strategy {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 8px;
  padding: 16px;
  color: white;
  margin-bottom: 16px;
}

.strategy-info {
  display: flex;
  align-items: center;
}

.strategy-icon {
  font-size: 24px;
  margin-right: 12px;
}

.strategy-details {
  flex: 1;
}

.strategy-name {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
}

.strategy-class {
  font-size: 12px;
  opacity: 0.8;
}

.divider-text {
  color: #909399;
  font-size: 12px;
}

.strategies-list {
  max-height: 300px;
  overflow-y: auto;
}

.strategy-item {
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  margin-bottom: 8px;
  transition: all 0.3s;
}

.strategy-item:hover {
  border-color: #409eff;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.1);
}

.strategy-item.current {
  border-color: #409eff;
  background: #f0f9ff;
}

.strategy-content {
  display: flex;
  align-items: center;
  padding: 12px;
}

.strategy-content .strategy-icon {
  font-size: 20px;
  margin-right: 12px;
  color: #409eff;
}

.strategy-content .strategy-info {
  flex: 1;
}

.strategy-content .strategy-name {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 4px;
  color: #303133;
}

.strategy-status {
  font-size: 12px;
}

.strategy-actions {
  display: flex;
  gap: 8px;
}

/* 图标样式 */
.icon-local {
  color: #67c23a;
}

.icon-minio {
  color: #c21f30;
}

.icon-oss {
  color: #ff6600;
}

.test-result {
  text-align: center;
  padding: 20px;
}
</style> 